<template>
  <div class="h-full datashare">
    <el-scrollbar style="height: 100%;">
      <div class="banner">
        <div class="wh-mg">
          <div class="new-pa1"> 娄 山 云 水 务 数 据 共 享 服 务</div>
          <div class="new-ys"></div>
          <div class="new-pa2">助力企业运营效率，释放数据商业价值</div>
          <div class="new-content1">
            <div class="new-cn1">
              <div class="new-cn2">数据总量</div>
              <div>102亿条</div>
            </div>
            <div class="new-cn1">
              <div class="new-cn2">数据目录</div>
              <div>1031条</div>
            </div>
            <div class="new-cn1">
              <div class="new-cn2">数据接口</div>
              <div>0个</div>
            </div>
            <div class="new-cn1">
              <div class="new-cn2">调用次数</div>
              <div>0次</div>
            </div>
            <div class="new-cn1">
              <div class="new-cn2">可下载次数</div>
              <div>0个</div>
            </div>
            <div class="new-cn1">
              <div class="new-cn2">下载次数</div>
              <div>0次</div>
            </div>
            <div class="new-cn1">
              <div class="new-cn2">接入企业</div>
              <div>1500个</div>
            </div>
          </div>
        </div>
      </div>
      <ul class="homeList">
        <li v-for="(item,index) in router.dataSharing" :key="index">
          <div :class="'homeList-item homeList-item-' + index">
            <svg-icon :icon-class="item.icon"/>
            <div class="homeList-title">{{ item.title }}</div>
            <ul>
              <li v-for="(it,i) in item.list" :key="i" class="homeList-it">
                <router-link v-if="!it.children" class="inlineBlock" :class="{click:it.click}"
                             :to="'/dataSharing/' + item.url + '/'+ it.url">
                  {{ it.title }}
                </router-link>
                <router-link v-else class="inlineBlock" :class="{click:it.click}"
                             :to="'/dataSharing/' + item.url + '/'+ it.url+ '/'+ it.children[0].url">
                  {{ it.title }}
                  <span v-if="it.children"></span>
                </router-link>
              </li>
            </ul>
          </div>
        </li>
      </ul>
      <div style="margin: 0 auto;width: 1100px;">
        <div class="new-con ">
          <div class="new-content2 wh-mg">
            <div class="new-con11" id="new-con11">
              <div class="new-boname">
                <img src="./images/newest.png" alt="" style="width: 34px;">
                <span>最新数据</span>
              </div>
              <div onclick="newck(2)">
                <img src="./images/newda1.png" alt="" style="width: 34px;">
                <span>热门数据</span>
              </div>
              <div onclick="newck(3)">
                <img src="./images/newda2.png" alt="" style="width: 34px;">
                <span>推荐数据</span>
              </div>
            </div>
            <div class="new-diva">
              <div class="new-mad">
                <div class="new-div1"></div>
                <span style="color:#0064b4;"> 最新上线目录</span> &nbsp;
                <span style="font-size:14px;margin-left: 6px">最新上线接口</span>
              </div>
              <div style="display: flex;">
                <div class="new-nan11" style="margin-top:8px;">
                  <div class="new-div ">
                    <span> [ 2019-05-10 ]</span>
                    <div class="new-dsds"></div>
                    <div class="new-anm11">
                      <div></div>
                    </div>
                    <div class="new-dsds new-ll"></div>
                    <span style="color: #fb7329"> 四川润舒站水量数据</span>
                  </div>
                  <div class="new-div ">
                    <span> [ 2019-05-09 ]</span>
                    <div class="new-dsds"></div>
                    <div class="new-anm11"></div>
                    <div class="new-dsds new-ll"></div>
                    <span> 成都水森活站水量数据</span>
                  </div>
                  <div class="new-div new-bacvt">
                    <span> [ 2019-05-08 ]</span>
                    <div class="new-dsds"></div>
                    <div class="new-anm11"></div>
                    <div class="new-dsds new-ll"></div>
                    <span> 河北如归站水量数据</span>
                  </div>
                  <div class="new-div new-bacvt ">
                    <span> [ 2019-05-07 ]</span>
                    <div class="new-dsds"></div>
                    <div class="new-anm11"></div>
                    <div class="new-dsds new-ll"></div>
                    <span> 四川润心站水量数据</span>
                  </div>
                  <div class="new-div newshow">
                    <span> [ 2019-05-06 ]</span>
                    <div class="new-dsds"></div>
                    <div class="new-anm11"></div>
                    <div class="new-dsds new-ll"></div>
                    <span> 四川甘泉井站水量数据</span>
                  </div>
                  <div class="new-div newshow">
                    <span> [ 2019-05-05 ]</span>
                    <div class="new-dsds"></div>
                    <div class="new-anm11 new-ll"></div>
                    <div class="new-dsds new-ll"></div>
                    <span> 成都万源站水量数据</span>
                  </div>
                  <!-- <div class="new-div new-bacvt">
                      <span> [ 2019-05-04]</span>
                      <div class="new-dsds"></div>
                      <div class="new-anm11" > </div>
                      <div class="new-dsds new-ll"></div>
                      <span> 河北省103站水量数据</span>
                  </div> -->
                </div>

              </div>
            </div>
          </div>
          <div class="new-content3 wh-mg">
            <div class="new-data">数据分类</div>
            <div class="new-bosa">
              <div class="new-asd">
                <p>
                  <img src="./images/data4.png" alt="" style="width:60px">
                  <span class="new-nampa1">空间数据</span>
                </p>
                <div class="new-bosa11">
                  <div>
                    <p>集团调用 </p>
                    <p>3.1GB </p>
                  </div>
                  <div>
                    <p>部门调用 </p>
                    <p> 1.3 TB</p>
                  </div>
                  <div>
                    <p>第三方调用</p>
                    <p> 0.2GB</p>
                  </div>
                </div>
              </div>
              <div class="new-asd">
                <p>
                  <img src="./images/data5.png" alt="" style="width:60px">
                  <span class="new-nampa1">预测分析</span>
                </p>
                <div class="new-bosa11">
                  <div>
                    <p>集团调用 </p>
                    <p>2.1GB </p>
                  </div>
                  <div>
                    <p>部门调用 </p>
                    <p> 1.3 TB</p>
                  </div>
                  <div>
                    <p>第三方调用</p>
                    <p> 1.2GB</p>
                  </div>
                </div>
              </div>
              <div class="new-asd">
                <p>
                  <img src="./images/data6.png" alt="" style="width:60px">
                  <span class="new-nampa1">专题数据</span>
                </p>
                <div class="new-bosa11">
                  <div>
                    <p>集团调用 </p>
                    <p>3.6GB </p>
                  </div>
                  <div>
                    <p>部门调用 </p>
                    <p> 2.3 TB</p>
                  </div>
                  <div>
                    <p>第三方调用</p>
                    <p> 0.2GB</p>
                  </div>
                </div>
              </div>
              <div class="new-asd">
                <p>
                  <img src="./images/data1.png" alt="" style="width:60px">
                  <span class="new-nampa1">档案数据</span>
                </p>
                <div class="new-bosa11">
                  <div>
                    <p>集团调用 </p>
                    <p>9.1GB </p>
                  </div>
                  <div>
                    <p>部门调用 </p>
                    <p> 8.3 TB</p>
                  </div>
                  <div>
                    <p>第三方调用</p>
                    <p> 4.2GB</p>
                  </div>
                </div>
              </div>
              <div class="new-asd">
                <p>
                  <img src="./images/data2.png" alt="" style="width:60px">
                  <span class="new-nampa1">监测数据</span>
                </p>
                <div class="new-bosa11">
                  <div>
                    <p>集团调用 </p>
                    <p>6.1GB </p>
                  </div>
                  <div>
                    <p>部门调用 </p>
                    <p> 7.3 TB</p>
                  </div>
                  <div>
                    <p>第三方调用</p>
                    <p> 5.2GB</p>
                  </div>
                </div>
              </div>
              <div class="new-asd">
                <p>
                  <img src="./images/data3.png" alt="" style="width:60px">
                  <span class="new-nampa1">业务数据</span>
                </p>
                <div class="new-bosa11">
                  <div>
                    <p>集团调用 </p>
                    <p>1.1GB </p>
                  </div>
                  <div>
                    <p>部门调用 </p>
                    <p> 4.3 TB</p>
                  </div>
                  <div>
                    <p>第三方调用</p>
                    <p> 1.7GB</p>
                  </div>
                </div>
              </div>

            </div>
          </div>
          <div class="new-con2-1 wh-mg">
            <div class="new-dasa">
              已接入数据企业
              <div></div>
            </div>
          </div>
          <div class="new-content4 wh-mg">

            <div style=" display: flex; margin-left: 40px; height: 340px; margin-top: 50px;margin-right: 80px">
              <div style="margin-right:20px">
                <table>
                  <thead>
                  <tr>
                    <th colspan="4">
                      城市目录开放情况
                    </th>
                  </tr>
                  <tr>
                    <th>
                      行政区域
                    </th>
                    <th>
                      企业数量
                    </th>
                    <th>
                      行政区域
                    </th>
                    <th>
                      企业数量
                    </th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>广东省</td>
                    <td>156</td>
                    <td>四川省</td>
                    <td>106</td>
                  </tr>
                  <tr>
                    <td>贵州省</td>
                    <td>143</td>
                    <td>河南省</td>
                    <td>163</td>
                  </tr>
                  <tr>
                    <td>云南省</td>
                    <td>142</td>
                    <td>河北省</td>
                    <td>172</td>
                  </tr>
                  <tr>
                    <td>江西省</td>
                    <td>137</td>
                    <td>安徽省</td>
                    <td>114</td>
                  </tr>
                  <tr>
                    <td>湖南省</td>
                    <td>130</td>
                    <td>广西省</td>
                    <td>155</td>
                  </tr>
                  <tr>
                    <td>湖北省</td>
                    <td>118</td>
                    <td>浙江省</td>
                    <td>126</td>
                  </tr>

                  </tbody>
                </table>
              </div>
            </div>
            <div style=" flex-grow: 1;margin: 20px">
              <div id="mapApp" style="width:500px;height:340px;margin-right: 40px">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer clearfix">
        <ul class="fo-ctas">
          <li class="c1">
            <i class="ico"></i>
            <div class="b">
              <p>133 8888 6666<span>（业务咨询）</span></p>
              <p>138 6666 8888<span>（服务投诉）</span></p>
            </div>
          </li>
          <li class="c2">
            <i class="ico"></i>
            <div class="b">
              <p><a href="#" target="_blank" rel="nofollow">贵州省遵义市桐梓县<br>3号新23号附6号</a>
              </p>
            </div>
          </li>
        </ul>
        <div class="fo-cop">
          <p>Copyright 2018 Symansbon Brand All Right Reserved</p>
          <p>
          <p>川公网安备 <a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">510194645634564356号</a>
            &nbsp;<a href="#" target="_blank">网站建设</a> &nbsp;<a href="a" target="_blank" rel="nofollow">网站统计</a><br />
          </p>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>


  export default {
    name: 'Index',
    data() {
      return {
        router: this.$store.getters.router
      }
    },
    methods: {}
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "./css/home.css";

  .banner {
    margin-top: 5px;
    height: 300px;
    background: url("./images/data-home-banner-bg.png") no-repeat center;
    background-size: cover;
  }

  ul {
    padding: 0;
    line-height: 2;
  }

  .homeList {
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    & > li {
      width: 20%;
      padding: 10px 10px;
      margin-top: 1.5rem;
      a {
        padding: 5px 10px;
        border-radius: 4px;
      }
      a:hover {
        background: rgba(0, 0, 0, .2);
      }
      .homeList-item {
        padding: 15px 0 0 45px;
        height: 230px;
        border-radius: 2px;
        background: rgba(0, 0, 0, .15);
        position: relative;
        transition: box-shadow .2s;
        &:hover {
          box-shadow: 0 0 8rem inset rgba(0, 0, 0, .25);
          svg {
            top: 26px;
            left: 11px;
            font-size: 26px;
          }
        }
        &:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
          filter: blur(9px);
        }

        /* &-6:before {
           background: url("./images/bg-7.jpg") no-repeat center;
           background-size: cover;
         }
         &-5:before {
           background: url("./images/bg-1.png") no-repeat center;
           background-size: cover;
         }
         &-4:before {
           background: url("./images/bg-2.jpg") no-repeat center;
           background-size: cover;
         }
         &-3:before {
           background: url("./images/bg-3.jpg") no-repeat center;
           background-size: cover;
         }
         &-2:before {
           background: url("./images/bg-8.jpg") no-repeat center;
           background-size: cover;
         }
         &-1:before {
           background: url("./images/bg-5.jpg") no-repeat center;
           background-size: cover;
         }
         &-0:before {
           background: url("./images/bg-4.jpg") no-repeat center;
           background-size: cover;
         }*/
      }
    }
  }

  svg {
    position: absolute;
    left: 13px;
    top: 28px;
    font-size: 22px;
    margin-right: .6rem;
    transition: all .1s;
  }

  .homeList-title {
    padding-left: 8px;
    margin-bottom: 5px;
    font-size: 24px;
    color: #f1f1f1;
  }

  .homeList-it {

  }

  .inlineBlock {
    color: #999;
    &.click {
      color: #fff;
    }
  }
</style>
